<template>
  <div class="full">
    <div class="wrapper" id="signApp">
      <div class="main full">
        <div id="boxContainer">
        <div class="full">
          <el-form>
            <el-form-item>
              <h3>认证方式</h3>
              <el-select v-model="appUserAuthtype" placeholder="请选择验证方式" @change="changeAuthenType">
                <el-option v-for="item in appUserAuthtypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-show="isShowSignMethod">
              <h3>签章方式</h3>
              <el-select v-model="signMethod" placeholder="请选择签章方式" @change="changeSignMethod">
                <el-option value="singleTime" label="单次签章"></el-option>
                <el-option value="mutilTime" label="多次签章"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-show="false">
              <el-select v-model="signType" placeholder="签名者类型" >
                <el-option value="1"  label="用户签章请求" onselect="true"></el-option>
                <el-option value="2" label="组织签章请求"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-input v-model="userid" placeholder="业务系统用户ID" @change="changeUserid" clearable
                        style="width: 210px;" type="text"></el-input>
            </el-form-item>

            <el-form-item v-show="isShowPassword">
              <el-input v-model="password" placeholder="签章口令" clearable
                        style="width: 210px;" type="password"></el-input>
            </el-form-item>

            <el-form-item v-show="isShowRequestCheckCode">
              <el-button id="requestCheckCode" class="btn" style="width: 225px; margin: 0px"
                @click.native,prevent="clickRequestCheckCode">获取签章验证码</el-button>
            </el-form-item>

            <el-form-item v-show="isShowCheckCode">
              <el-input v-model="checkcode" placeholder="短信验证码" clearable
                        style="width: 210px;" type="text"></el-input>
            </el-form-item>

            <el-form-item v-show="isShowRequestToken">
              <el-button class="btn" style="width: 225px; margin: 0px"
                         @click.native,prevent="clickRequestToken">获取签章Token</el-button>
            </el-form-item>

            <el-form-item v-show="isShowToken">
              <el-input v-model="token" placeholder="认证Token" clearable
                        style="width: 210px;" type="text"></el-input>
            </el-form-item>

            <el-form-item v-show="isShowPdfSelect">
              <span id="pdfFileInputContainer">
                        <el-input type="file" class="label_better box"
                               style="width: 195px"
                               id="pdfFile"
                               data-new-placeholder="待签名PDF"
                                  name="pdfFile" accept="application/pdf" @change="getFile($event)"></el-input>
              </span>
            </el-form-item>

            <el-form-item v-show="isShowRequestSignStamp">
              <el-button @click.native,prevent="clickRequestStamp">获取签章图片</el-button>
            </el-form-item>

            <!--隐藏属性-->
            <div id="stampContainer" v-show="false">
              <input type="number" id="page" name="page" v-model="page"/>
              <input type="text" id="topLeftX" name="topLeftX" v-model="topLeftX"/>
              <input type="text" id="topLeftY" name="topLeftY" v-model="topLeftY"/>
              <input type="text" id="bottomRightX" name="bottomRightX" v-model="bottomRightX"/>
              <input type="text" id="bottomRightY" name="bottomRightY" v-model="bottomRightY"/>
            </div>
          </el-form>
        </div>
          <div id="pdfModelContainer" style="color: #fff" v-show="isShowPdfModelContainer">
            <!--PDF 控件-->
            <div id="pdfCanvasContainer">
              <br>
            <el-form-item id="pdfControls">
              <el-button id="prv" class="btn" style="width: auto" @click.native,prevent="prevPage">前一页</el-button>
              <span id="pageStatus" v-text="pageStatus"></span>
              <el-button id="next" class="btn" style="width: auto" @click.native,prevent="nextPage">后一页</el-button>
              <el-input type="number" id="pageNumber" class="box" style="width: 50px" v-model="page"></el-input>
              <el-button id="jump" class="btn" style="width: auto" @click="jumpPage">跳转</el-button>
              <br>
              显示缩放比例：<input min="3" max="15" id="scaleRange" type="range" v-model="scaleRange"
                            @change="changeScale"/><span
              id="scaleNumber" v-text="scaleNumber"></span> 倍
              <br>
            </el-form-item>
            <div id="canvasContainer">
              <canvas id="canvas" style="cursor: crosshair; border: solid 1px;"></canvas>
            </div>
              <br>
            </div>

            <el-form-item id="StampParamContainer">
              <table id="stampParamShow" align="center" valign="center" v-show="isShowStampParam">
                <tbody>
                <tr>
                  <td><label for="page-show">page：</label></td>
                  <td><span id="page-show" class="info" v-text="page"></span></td>
                </tr>
                <tr>
                  <td><label for="topLeftX-show">topLeftX：</label></td>
                  <td><span id="topLeftX-show" class="info" v-text="topLeftX"></span></td>
                </tr>
                <tr>
                  <td><label for="topLeftY-show">topLeftY：</label></td>
                  <td><span id="topLeftY-show" class="info" v-text="topLeftY"></span></td>
                </tr>
                <tr>
                  <td><label for="bottomRightX-show">bottomRightX：</label></td>
                  <td><span id="bottomRightX-show" class="info" v-text="bottomRightX"></span></td>
                </tr>
                <tr>
                  <td><label for="bottomRightY-show">bottomRightY：</label></td>
                  <td><span id="bottomRightY-show" class="info" v-text="bottomRightY"></span></td>
                </tr>
                <tr>
                  <td><label for="width-show">width：</label></td>
                  <td><span id="width-show" class="info" v-text="width"></span></td>
                </tr>
                <tr>
                  <td><label for="height-show">height：</label></td>
                  <td><span id="height-show" class="info" v-text="height"></span></td>
                </tr>
                </tbody>
              </table>
            </el-form-item>
          </div>
        </div>
        <!--加载动画播放区域-->
        <div id="loadContainer" class="center" v-show="isShowLoading">
          <p class="info">加载中，请稍后...</p><br><img v-bind:src="loadingImageURL"/><br>
        </div>

        <!--提交控件-->
        <div id="submitContainer" v-if="isShowSubmit">
          <button type="button" class="btn" id="reset" @click.prevent="clickRestForm">清空</button>
          <button type="button" class="btn" id="submit" @click.prevent="clickSubmit">提交</button>
        </div>
        <!--日志控件-->
        <div id="logController" class="center">
          <button id="logClear" class="btn" @click.prevent="clickClearLog">清除日志</button>
        </div>
        <!--日志输出位置-->
        <div id="output" class="center">
        </div>

      </div>
    </div>
  </div>
</template>

<script>
    import common from '../../assets/lib/common.js'
    import pdfPlugin from '../../assets/lib/pdfPlugin.js'
    import rubberhander from '../../assets/lib/rubberhander.js'
    import {getNowTime} from '../../utils'
    export default {
        name: "index",
        data(){
          return {
            //文件信息
            fileimfor:{},

            loadingImageURL:'',

            isShowPdfSelect: false,
            isShowPdfModelContainer: false,
            isShowCheckCode: false,
            isShowRequestCheckCode: false,
            isShowPassword: false,
            isShowToken: false,
            isShowRequestToken: false,
            isShowRequestSignStamp: false,
            isShowSignMethod: false,
            isShowSubmit: false,
            isShowStampParam: false,
            isShowLoading: false,

            isChooseAuth: false,
            isChooseSignMethod: false,
            isChooseSignBox: false,
            isUseridChange: false,

            signMethod: '',
            appUserAuthtype: '',
            appUserAuthtypeList:[
              {value:'1',label:'口令'},
              {value:'2',label:'短信验证码'},
              {value:'12',label:'口令+短信验证码'}
            ],
            userid: '',
            password: '',
            checkcode: '',
            token: '',
            pdfFile: '',
            signType: 1,

            topLeftX: 0,
            topLeftY: 0,
            bottomRightX: 0,
            bottomRightY: 0,
            page: 1,

            width: 0,
            height: 0,

            pageStatus: '',
            scaleNumber: 1,
            scaleRange: 10,//50

            signRequestURL: '',
            tempSaveUserId: ''
          }
        },
      methods:{
        formatTooltip(val){
          return val+"%";
        },
        changeAuthenType(value){
          console.log(value);
          this.resetShow();
          switch (value){
            case '1'://显示密码框和请求签章图片
              this.isShowPassword = true;
              this.isShowSignMethod = true;
              break;
            case '2'://显示请求验证码
              this.isShowRequestCheckCode = true;
              break;
            case '12'://显示密码框和请求验证码
              this.isShowPassword = true;
              this.isShowRequestCheckCode = true;
              break;
          }
          if (value) {
            this.isChooseAuth = true;
            this.appUserAuthtype = value;
          }
        },
        /**
         * 重置所有带有显示参数为不显示
         */
        resetShow() {
          console.log("clear all!");
          this.isShowPdfSelect = false;
          this.isShowPdfModelContainer = false;
          this.isShowCheckCode = false;
          this.isShowRequestCheckCode = false;
          this.isShowPassword = false;
          this.isShowToken = false;
          this.isShowRequestToken = false;
          this.isShowRequestSignStamp = false;
          this.isShowSignMethod = false;
          this.isShowSubmit = false;
          this.isShowStampParam = false;
          this.isShowLoading = false;
          this.isChooseAuth = false;
          this.isChooseSignMethod = false;
          this.isChooseSignBox = false;
          this.signMethod = '';
          // this.appUserAuthtype = '';
          this.userid = '';
          this.password = '';
          this.checkcode = '';
          this.token = '';
          this.pdfFile = '';
          this.signType = 1;
          this.topLeftX = 0;
          this.topLeftY = 0;
          this.bottomRightX = 0;
          this.bottomRightY = 0;
          this.page = 1;
          this.width = 0;
          this.height = 0;
          this.pageStatus = '';
          this.scaleNumber = 1;
          this.scaleRange = 10;
        },
        /**
         * 请求签章图片
         */
        clickRequestStamp(){
          try{

          }catch (msg){
            console.error()
          }
        }
      },
      mounted(){
          this.fileimfor=this.$route.query.fileimfor;
      }
    }
</script>

<style scoped>
  @import 'style/common.css';
  @import "style/templateCSS.css";
</style>
